<template>
    <div class="login-container">
        <div v-if="errorMessage" class="error-message" @click="errorMessage = ''">
            <div class="error-content">
                <div class="error-icon">
                    <svg viewBox="0 0 24 24">
                        <path d="M12,2L1,21H23M12,6L19.53,19H4.47M11,10V14H13V10M11,16V18H13V16" />
                    </svg>
                </div>
                <div class="error-text">{{ errorMessage }}</div>
            </div>
            <div class="error-progress" :style="{ width: progressWidth }"></div>
        </div>

        <div class="login-box">
            <div class="login-header">
                <h1>定位 <span>观测站</span></h1>
                <div class="pulse"></div>
            </div>

            <form @submit.prevent="handleSubmit" class="login-form">
                <div class="input-group">
                    <label for="username">用户名</label>
                    <input
                            id="username"
                            type="text"
                            v-model="login.username"
                            @focus="inputFocus('username')"
                            @blur="inputBlur('username')"
                            :class="{ active: activeField === 'username' }"
                    />
                    <div class="input-underline"></div>
                </div>

                <div class="input-group">
                    <label for="password">密码</label>
                    <input
                            id="password"
                            type="password"
                            v-model="login.password"
                            @focus="inputFocus('password')"
                            @blur="inputBlur('password')"
                            :class="{ active: activeField === 'password' }"
                    />
                    <div class="input-underline"></div>
                </div>

                <div class="captcha-group">
                    <div class="input-group">
                        <label for="captcha">验证码</label>
                        <input
                                id="captcha"
                                type="text"
                                v-model="login.captcha"
                                @focus="inputFocus('captcha')"
                                @blur="inputBlur('captcha')"
                                :class="{ active: activeField === 'captcha' }"
                        />
                        <div class="input-underline"></div>
                    </div>
                    <div class="captcha-image" @click="refreshCaptcha">
<!--                        <img :src="captchaImage" alt="CAPTCHA" />-->
                        <img style="vertical-align: middle; height: 40px; cursor: pointer" :src="captchaUrl" alt="" />

<!--                        <div class="captcha-refresh">-->
<!--                            <svg viewBox="0 0 24 24">-->
<!--                                <path d="M17.65,6.35C16.2,4.9 14.21,4 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20C15.73,20 18.84,17.45 19.73,14H17.65C16.83,16.33 14.61,18 12,18A6,6 0 0,1 6,12A6,6 0 0,1 12,6C13.66,6 15.14,6.69 16.22,7.78L13,11H20V4L17.65,6.35Z" />-->
<!--                            </svg>-->
<!--                        </div>-->
                    </div>
                </div>

                <div class="form-actions">
                    <TechButton type="submit" :loading="loading">
                        登录
                    </TechButton>
                </div>
            </form>

            <div class="login-footer">
                <p>SECURE CONNECTION ESTABLISHED</p>
                <div class="connection-status">
                    <div class="status-indicator"></div>
                    <span>ENCRYPTED</span>
                </div>
            </div>
        </div>

        <div class="tech-lines">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
        </div>
    </div>
</template>

<script>
    import TechButton from './TechButton.vue'
    import {EventBus} from "../../utils/event-bus";
    import axios from 'axios'
    export default {
        components: {
            TechButton
        },
        data() {
            return {
                form: {
                    username: '',
                    password: '',
                    captcha: ''
                },
                errorMessage: '',
                errorTimeout: null,
                captchaImage: '',
                captchaText: '',
                activeField: '',
                loading: false,
                login : { username: "", password: "", captcha: "", uuid: "" },
                captchaUrl:''
            }
        },
        mounted() {
            this.generateCaptcha()

        },
        methods: {
            showError(message) {
                // 清除之前的错误和定时器
                this.errorMessage = ''
                clearInterval(this.errorTimeout)

                // 设置新错误
                this.errorMessage = message
                this.progressWidth = '100%'

                // 5秒后自动消失
                const duration = 5000 // 5秒
                const interval = 50 // 更新频率
                const steps = duration / interval
                const stepSize = 100 / steps
                let currentStep = 0

                this.errorTimeout = setInterval(() => {
                    currentStep++
                    this.progressWidth = `${100 - (currentStep * stepSize)}%`

                    if (currentStep >= steps) {
                        this.errorMessage = ''
                        clearInterval(this.errorTimeout)
                    }
                }, interval)
            },
            getUuid (){
                return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
                    const r = (Math.random() * 16) | 0,
                        v = c == "x" ? r : (r & 0x3) | 0x8;
                    return v.toString(16);
                });
            },
            generateCaptcha() {
                this.login.uuid = this.getUuid();
                this.captchaUrl = process.env.VUE_APP_BASE_API+`/captcha?uuid=${this.login.uuid}`;
            },
            refreshCaptcha() {
                this.generateCaptcha()
                this.form.captcha = ''
            },
            inputFocus(field) {
                this.activeField = field
            },
            inputBlur() {
                this.activeField = ''
            },
            handleSubmit() {
                if (!this.login.username || !this.login.password) {
                    this.showError('用户名密码不为空')
                    return
                }

                if (!this.login.captcha) {
                    this.showError('验证码不为空')

                    return
                }

                this.loading = true;
                axios.post(process.env.VUE_APP_BASE_API+"/login", this.login)
                    .then((res) => {
                        this.refreshCaptcha();
                        this.loading = false;
                        if (res.status === 200&&res.data.code===0 &&res.data.data.token) {
                            localStorage.setItem('token', res.data.data.token);
                            EventBus.$emit('setToken', res.data.data.token);
                        } else {
                            this.showError(res.data.msg);
                        }
                    })
                    .catch(() => {
                        this.loading = false;
                    });
            }
        }
    }
</script>

<style scoped>
    /* 新增错误提示样式 */
    .error-message {
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        max-width: 400px;
        background: rgba(255, 55, 95, 0.2);
        border: 1px solid rgba(255, 55, 95, 0.5);
        border-radius: 4px;
        backdrop-filter: blur(10px);
        box-shadow: 0 0 15px rgba(255, 55, 95, 0.3);
        overflow: hidden;
        z-index: 1000;
        cursor: pointer;
        animation: slideIn 0.3s ease-out;
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateX(-50%) translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }
    }

    .error-content {
        display: flex;
        align-items: center;
        padding: 15px;
    }

    .error-icon {
        margin-right: 12px;
    }

    .error-icon svg {
        width: 24px;
        height: 24px;
        fill: #ff375f;
    }

    .error-text {
        color: #ff8fa3;
        font-size: 0.9rem;
        flex: 1;
    }

    .error-progress {
        height: 3px;
        background: linear-gradient(to right, #ff375f, #ff758c);
        transition: width 0.05s linear;
    }
    .login-container {
        position: relative;
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        padding: 2rem;
        background: rgba(10, 25, 47, 0.8);
        border-radius: 8px;
        box-shadow: 0 0 20px rgba(100, 255, 218, 0.1);
        overflow: hidden;
        z-index: 1;
    }

    .login-container::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: linear-gradient(
                to bottom right,
                rgba(100, 255, 218, 0.1) 0%,
                rgba(100, 255, 218, 0) 60%
        );
        transform: rotate(30deg);
        z-index: -1;
    }

    .login-box {
        position: relative;
    }

    .login-header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .login-header h1 {
        font-size: 1.8rem;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: #64ffda;
        margin-bottom: 1rem;
    }

    .login-header h1 span {
        color: #e6f1ff;
        font-weight: 300;
    }

    .pulse {
        width: 10px;
        height: 10px;
        background: #64ffda;
        border-radius: 50%;
        margin: 0 auto;
        box-shadow: 0 0 0 0 rgba(100, 255, 218, 0.7);
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(100, 255, 218, 0.7);
        }
        70% {
            transform: scale(1);
            box-shadow: 0 0 0 10px rgba(100, 255, 218, 0);
        }
        100% {
            transform: scale(0.95);
            box-shadow: 0 0 0 0 rgba(100, 255, 218, 0);
        }
    }

    .login-form {
        margin-bottom: 2rem;
    }

    .input-group {
        position: relative;
        margin-bottom: 1.5rem;
    }

    .input-group label {
        display: block;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #64ffda;
        margin-bottom: 0.5rem;
    }

    .input-group input {
        width: 100%;
        background: transparent;
        border: none;
        border-bottom: 1px solid #1e2a3a;
        color: #e6f1ff;
        font-size: 1rem;
        padding: 0.5rem 0;
        outline: none;
        transition: all 0.3s ease;
    }

    .input-group input.active {
        border-bottom-color: #64ffda;
    }

    .input-underline {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 2px;
        background: #64ffda;
        transition: width 0.3s ease;
    }

    .input-group input:focus ~ .input-underline {
        width: 100%;
    }

    .captcha-group {
        display: flex;
        align-items: flex-end;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }

    .captcha-group .input-group {
        flex: 1;
        margin-bottom: 0;
    }

    .captcha-image {
        position: relative;
        width: 150px;
        height: 40px;
        cursor: pointer;
        overflow: hidden;
        border-radius: 4px;
    }

    .captcha-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .captcha-refresh {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(10, 25, 47, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .captcha-refresh svg {
        width: 20px;
        height: 20px;
        fill: #64ffda;
    }

    .captcha-image:hover .captcha-refresh {
        opacity: 1;
    }

    .form-actions {
        margin-top: 2rem;
    }

    .login-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 1rem;
        border-top: 1px solid #1e2a3a;
    }

    .login-footer p {
        font-size: 0.7rem;
        color: #8892b0;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .connection-status {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .status-indicator {
        width: 8px;
        height: 8px;
        background: #64ffda;
        border-radius: 50%;
        animation: blink 2s infinite;
    }

    @keyframes blink {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }

    .connection-status span {
        font-size: 0.7rem;
        color: #64ffda;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .tech-lines {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: -1;
    }

    .tech-lines .line {
        position: absolute;
        background: rgba(100, 255, 218, 0.05);
    }

    .tech-lines .line:nth-child(1) {
        top: 0;
        left: 10%;
        width: 1px;
        height: 100%;
    }

    .tech-lines .line:nth-child(2) {
        top: 20%;
        left: 0;
        width: 100%;
        height: 1px;
    }

    .tech-lines .line:nth-child(3) {
        top: 0;
        right: 10%;
        width: 1px;
        height: 100%;
    }
</style>